<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=1440, minimum-scale=0.1, maximum-scale=10, user-scalable=no" />
    <meta name="color-scheme" content="light" />
    <meta name="full-screen" content="yes" />
    <link rel="icon" href="favicon.ico" />
    <title>中数智算</title>
  </head>
  <body>
    <script src="./lib/qrcode.min.js"></script>
    <script src="./lib/vue.global.min.js"></script>
    <link rel="stylesheet" href="./lib/element-plus/index.css" />
    <script src="./lib/element-plus/index.full.min.js"></script>
    <script src="./lib/element-plus/locale/zh-cn.js"></script>
    <script src="./lib/Application.umd.js"></script>
    <script src="./lib/apiDoc.js"></script>

    <!-- 表单页面组件 -->
    <template id="OrganizationDesign">
      <div class="team-design flex-column" v-loading="loading">
        <el-form label-position="top" :model="form" :rules="rules" :label-width="100" ref="formRef">
          <template v-if="form.type=='Goverment'">
            <el-form-item label="团队名称" prop="zg_name">
              <el-input v-model="form.zg_name" :maxlength="50" placeholder="请输入团队名称"></el-input>
            </el-form-item>
            <el-form-item label="分配员" prop="zg_admin_name">
              <el-input v-model="form.zg_admin_name" :maxlength="50" placeholder="请输入分配员姓名"></el-input>
            </el-form-item>
            <el-form-item label="分配账号(手机号)" prop="zg_admin_userName">
              <el-input v-model="form.zg_admin_userName" :maxlength="50" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="账号密码" prop="zg_admin_password">
              <el-input v-model="form.zg_admin_password" :maxlength="50" placeholder="请输入账号密码"></el-input>
            </el-form-item>
            <el-form-item label="部门层级" prop="adcode">
              <el-cascader
                class="width-100"
                v-model="form.adcode"
                :options="treeSelectData"
                :props="props"
                placeholder="请选择"
              ></el-cascader>
            </el-form-item>
          </template>
          <template v-else>
            <!-- {{form}} -->
            <el-form-item label="团队名称" prop="sc_name">
              <el-input v-model="form.sc_name" :maxlength="50" placeholder="请输入团队名称"></el-input>
            </el-form-item>
            <el-form-item label="分配员" prop="sc_admin_name">
              <el-input v-model="form.sc_admin_name" :maxlength="50" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="分配账号(手机号)" prop="sc_admin_userName">
              <el-input v-model="form.sc_admin_userName" :maxlength="50" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="账号密码" prop="sc_admin_password">
              <el-input v-model="form.sc_admin_password" :maxlength="50" placeholder="请输入账号密码"></el-input>
            </el-form-item>
          </template>
          <div class="form-action text-center">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="save">确认</el-button>
          </div>
        </el-form>
      </div>
    </template>
    <script>
      var OrganizationDesign = {
        extends: BaseComponent,
        template: "#OrganizationDesign",
        name: "OrganizationDesign",

        props: ["design"],
        emits: ["close"],
        inject: ["$upper"],
        data() {
          return {
            loading: false,
            form: this.design || {},
            rules: {
              sc_name: [
                {
                  required: true,
                  message: "请输入"
                }
              ],
              sc_admin_name: [
                {
                  required: true,
                  message: "请输入"
                }
              ],
              sc_admin_userName: [
                {
                  required: true,
                  message: "请输入"
                  // validator(rule, value, callback) {
                  //   callback();
                  // }
                },
                window.$g.validator.phone
              ],
              sc_admin_password: [
                {
                  required: true,
                  message: "请输入密码"
                },
                window.$g.validator.noChinese
              ],
              zg_name: [
                {
                  required: true,
                  message: "请输入"
                }
              ],
              zg_admin_name: [
                {
                  required: true,
                  message: "请输入"
                }
              ],
              zg_admin_userName: [
                {
                  required: true,
                  message: "请输入"
                  // validator(rule, value, callback) {
                  //   callback();
                  // }
                },
                window.$g.validator.phone
              ],

              zg_admin_password: [
                {
                  required: true,
                  message: "请输入密码"
                },
                window.$g.validator.noChinese
              ],
              adcode: [
                {
                  required: true,
                  message: "请选择"
                }
              ]
            },
            props: { checkStrictly: true, emitPath: false, value: "value", label: "name", children: "children" }
          };
        },
        computed: {
          treeSelectData() {
            return (((this.$upper || {}).dataGoverment || [])[0] || {}).children;
          }
        },
        created() {
          // this.getData();
        },

        methods: {
          cancel() {
            this.$emit(`close`);
          },
          save() {
            this.$refs.formRef.validate((valid) => {
              if (valid) {
                let param = this.form;
                this.loading = true;
                let key =
                  param.type == "Goverment"
                    ? param.zg_id
                      ? "sq_team.UpdateGoverment"
                      : "sq_team.InsertGoverment"
                    : param.sc_id
                    ? "sq_team.UpdateCompany"
                    : "sq_team.InsertCompany";

                if (param.type == "Company") {
                  param.wbt_id = param.wbt_id || window.wbt_id || 1;
                  param.name = param.sc_name;
                }
                if (param.type == "Goverment") {
                  param.zg_id = param.zg_id || 0;
                  param.zg_createDate = param.zg_createDate || "2023-06-16T02:46:41.491Z";
                }
                this.$g.ajax.$api(key, param).then((result) => {
                  console.debug("[save]", result, param);
                  this.loading = false;
                  this.$g.toast(result.msg, result.status == "success" ? "success" : "error");
                  result.status == "success" && this.$emit(`close`, "reFresh");
                });
              } else {
                // this.$g.toast(result.msg, result.status == "success" ? "success" : "error");
                return false;
              }
            });
          }
        }
      };
    </script>
    <style>
      .organization-design {
      }
    </style>
    <!-- 管理页面组件 -->
    <template id="OrganizationManage">
      <div class="organization-manage flex-column app-page" v-loading="loading">
        <div class="page-head action-bar flex-row-between flex-row-center">
          <div>团队名称 : {{ $g.session.data || "无" }}</div>
          <el-space>
            <el-button type="primary" @click="addGoverment()">主管部门创建</el-button>
            <el-button type="primary" @click="addCompany()">单位创建</el-button>
          </el-space>
        </div>

        <div class="page-body flex-row-between">
          <div class="page-nav flex-column">
            <div class="view view-auto">
              <el-tree
                ref="treeGoverment"
                node-key="value"
                :data="dataGoverment"
                :highlight-current="true"
                :current-node-key="currentKey"
                :props="props"
                :default-expanded-keys="expandedKeysGoverment"
                :expand-on-click-node="false"
                @node-click="nodeclick"
                :height="208"
              >
                <template #default="{ node, data }">
                  <div class="tree-node flex-row-between flex-row-center">
                    <span class="flex-row-center" :title="data.name">
                      <Icon :icon="'Jiedian'"></Icon>
                      <span class="name text-nowrap">{{ data.name }}</span>
                      <span class="num" v-if="(data.$data||{}).num">({{(data.$data||{}).num}})</span>
                    </span>
                  </div>
                </template>
              </el-tree>

              <el-tree
                ref="treeCompany"
                node-key="value"
                :data="dataCompany"
                :highlight-current="true"
                :current-node-key="currentKey"
                :props="props"
                :default-expanded-keys="expandedKeysCompany"
                :expand-on-click-node="false"
                :height="208"
                @node-click="nodeclick"
              >
                <template #default="{ node, data }">
                  <div class="tree-node flex-row-between flex-row-center">
                    <span>
                      <Icon :icon=" 'Jiedian-Cjdw'"></Icon>
                      <span class="name text-nowrap">{{ data.name }}</span>
                      <span class="num" v-if="(data.$data||{}).num">({{(data.$data||{}).num}})</span>
                    </span>
                  </div>
                </template>
              </el-tree>
            </div>
          </div>
          <div class="organization-page flex-column">
            <div class="title" style="border: none">
              <el-space>
                <div class="">团队名称:</div>
                <el-input placeholder="请输入" v-model="query.name" :maxlength="50"></el-input>
                <el-button type="primary" @click="getList()">查询</el-button>
                <el-button @click="query.name=null">重置</el-button>
              </el-space>
            </div>
            <div class="view">
              <el-breadcrumb class="bread-crumb flex-row-center" :separator-icon="separator">
                <el-breadcrumb-item v-for="item in path" :key="item.name">{{ item.name }}</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <div class="view view-auto">
              <el-card class="card" v-for="item in resultData" :key="item.name">
                <div class="prview click" :style="style(item)" @click="link(item)"></div>
                <div class="footer flex-row-between flex-row-center">
                  <span class="name flex-row-center">
                    <Icon :icon="item.type=='Goverment'? 'Jiedian':'Jiedian-Cjdw'"></Icon>
                    {{ item.name }}
                  </span>
                  <el-dropdown placement="top-end" trigger="click">
                    <Icon icon="MoreFilled"></Icon>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item @click="getDesign(item)">
                          <Icon icon="edit"></Icon>
                          编辑
                        </el-dropdown-item>
                        <el-dropdown-item @click="remove(item)" class="error">
                          <Icon icon="Delete"></Icon>
                          删除
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </el-card>
            </div>
          </div>
        </div>
        <el-dialog
          width="500px"
          :title="title"
          :close-on-press-escape="false"
          :close-on-click-modal="false"
          :model-value="design ? true : false"
          @close="setDesign()"
        >
          <Organization-Design v-if="design" :design="design" @close="close"></Organization-Design>
        </el-dialog>
      </div>
    </template>
    <script>
      var OrganizationManage = {
        template: "#OrganizationManage",
        extends: BaseComponent,
        name: "OrganizationManage",
        components: { OrganizationDesign },
        data() {
          return {
            design: null,
            nodeActive: null,
            loading: false,
            query: { name: null },
            props: {
              value: "value",
              label: "name",
              children: "children"
            },
            resultGoverment: null,
            resultCompany: null,
            expandedKeysGoverment: [null], //['510000']
            expandedKeysCompany: [null]
          };
        },
        provide() {
          // this.$g.toast.ctx = ElMessage;
          return {
            $upper: this
          };
        },
        computed: {
          currentKey() {
            let nodeActive = this.nodeActive ? this.nodeActive : {};
            return nodeActive.key;
          },
          separator() {
            return Vue.h("svg", {
              viewBox: "0 0 1024 1024",
              innerHTML: `<path fill="currentColor" d="M452.864 149.312a29.12 29.12 0 0 1 41.728.064L826.24 489.664a32 32 0 0 1 0 44.672L494.592 874.624a29.12 29.12 0 0 1-41.728 0 30.592 30.592 0 0 1 0-42.752L764.736 512 452.864 192a30.592 30.592 0 0 1 0-42.688zm-256 0a29.12 29.12 0 0 1 41.728.064L570.24 489.664a32 32 0 0 1 0 44.672L238.592 874.624a29.12 29.12 0 0 1-41.728 0 30.592 30.592 0 0 1 0-42.752L508.736 512 196.864 192a30.592 30.592 0 0 1 0-42.688z"></path>`
            });
          },
          title() {
            var design = this.design || {};
            var name = design.type == "Goverment" ? "主管部门" : "单位";
            var action = design.id || design.name ? "编辑" : "创建";
            return `${name}${action}`;
          },
          resultData() {
            return ((this.nodeActive || {}).$list || []).filter((item) => !this.query.name || item.name.includes(this.query.name));
          },
          path() {
            let node = this.nodeActive;
            let arr = [];
            function recursion(obj) {
              obj && obj.data && obj.data.name && arr.unshift(obj.data);
              obj && obj.parent && recursion(obj.parent);
            }
            recursion(this.nodeActive);
            return arr;
          },
          dataGoverment() {
            return (this.resultGoverment || {}).data;
          },
          dataCompany() {
            return (this.resultCompany || {}).data;
          }
        },
        watch: {
          nodeActive: {
            handler(fresh, old) {
              fresh && this.getList();
            },
            immediate: true
          }
        },
        created() {
          this.getData();
        },
        methods: {
          //y页面跳转
          link(item) {
            console.debug("[item]", item);
            var id = item.type == "Goverment" ? item.$data.zg_id : item.$data.id;
            if (!id) {
              return this.$g.toast("没有id", "error");
            }
            var url = `DepartmentManage.html?type=${item.type}&companyId=` + id;
            window.open(url, url);
          },
          style(item) {
            var wbt_id = item.$data.wbt_id;
            var url = item.type == "Goverment" ? "Goverment" : `Company` + wbt_id;
            return `background-image: url(img/${url}.png)`;
          },
          close(refresh) {
            this.setDesign();
            (refresh && this.getList()) || this.getData();
          },
          nodeclick(data, node) {
            // console.debug(data, node);
            if (data) {
              this.nodeActive = null;
              this.$nextTick(() => {
                this.nodeActive = data.$data ? node : (node.childNodes || [])[0];
              });
            }
          },
          getList() {
            let nodeData = (this.nodeActive || {}).data;
            if (!nodeData) {
              return;
            }
            let key = nodeData.type == "Goverment" ? "sq_team.GetGovermentList" : "sq_team.GetCompanyList";
            let param = nodeData.$data;
            this.loading = true;
            this.$g.ajax.$api(key, param).then((result) => {
              this.loading = false;
              console.debug(key, result);
              this.nodeActive.$list = result.data;
              result.status != "success" && this.$g.toast(result.msg, "error");
              return result;
            });
          },
          addGoverment() {
            let $data = this.nodeActive ? this.nodeActive.data.$data : {};
            this.setDesign({ type: "Goverment", adcode: $data.adcode });
          },
          addCompany() {
            let $data = this.nodeActive ? this.nodeActive.data.$data : null;
            if (!$data || !$data.wbt_id) {
              return this.$g.toast("选择单位分类", "error");
            }
            console.debug($data, this.nodeActive);
            this.setDesign({ type: "Company", wbt_id: $data.wbt_id, version: 0 });
          },
          setDesign(design) {
            design && (design.sc_name = design.sc_name || design.name);
            this.design = design;
          },
          getDesign(item) {
            this.loading = true;
            let key = item.type == "Goverment" ? "sq_team.GetGovermentById" : "sq_team.GetCompanyById";
            this.$g.ajax.$api(key, item.$data).then((result) => {
              console.debug("[getDesign]", result, item);
              this.loading = false;
              result && this.setDesign({ ...result.data, type: item.type });
              result.status != "success" && this.$g.toast(result.msg, "error");
            });
          },
          remove(item) {
            console.debug(item);
            this.$confirm("是否删除当前项？", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
              .then(() => {
                this.loading = true;
                let key = item.type == "Goverment" ? "sq_team.DeleteGoverment" : "sq_team.DeleteCompany";
                this.$g.ajax.$api(key, item.$data).then((result) => {
                  console.debug("[remove]", result, item);
                  this.loading = false;
                  this.$g.toast(result.msg, result.status == "success" ? "success" : "error");
                  (result.status == "success" && this.getList()) || this.getData();
                });
              })
              .catch(() => {});
          },

          getData() {
            window.a = this;
            this.loading = true;
            var a = this.$g.ajax.$api("sq_team.GetGovermentTree", this.query).then((result) => {
              // console.debug(result);
              this.resultGoverment = result;
              let children = ((result.data || [])[0] || {}).children || [];
              let nodeKey = (children[0] || {}).value;
              this.$nextTick(() => {
                if (!this.nodeActive) {
                  this.nodeActive = this.$refs.treeGoverment.getNode(nodeKey);
                } else {
                  this.$refs.treeGoverment.setCurrentKey(this.nodeActive.key);
                }
              });
              return result;
            });
            var b = this.$g.ajax.$api("sq_team.GetOtherCompany", this.query).then((result) => {
              // console.debug(result);
              this.resultCompany = result;
              this.$nextTick(() => {
                if (this.nodeActive) {
                  this.$refs.treeCompany.setCurrentKey(this.nodeActive.key);
                }
              });
              return result;
            });
            Promise.all([a, b]).then(() => {
              this.loading = false;
            });
          }
        }
      };
    </script>
    <style>
      .name {
        max-width: 140px;
      }
      .num {
        margin-left: 3px;
        font-size: 0.9rem;
      }
      .organization-manage {
        position: relative;
        overflow: auto;
        flex-grow: 1;
      }
      .organization-page {
        overflow: auto;
        flex-grow: 1;
        border-left: 1px solid #2f517e1f;
      }

      .card {
        width: 23%;
        margin: 10px 1%;
        display: inline-block;
      }
      .card .prview {
        height: 190px;
        margin: 10px;
        border-radius: 3px;
        margin-bottom: 0;
        background-color: #f5f5f5;
        position: relative;
        background-size: cover;
      }
      .card .prview::before {
        /* content: "";
        position: absolute;
        inset: 20px;
        background-color: #747c99;
        z-index: -1; */
      }
      .card .footer {
        padding: 5px 10px;
        white-space: nowrap;
      }
      .el-card__body {
        padding: 0;
      }
      .card .name .el-icon {
        color: var(--el-color-primary);
        margin-right: 5px;
      }
    </style>
    <!-- 接口配置 -->
    <script>
      window.$g.ajax.apiDoc.sq_team = {
        GetGovermentTree: {
          name: "获取主管部门树",
          url: "api/sq_team/GetGovermentTree",
          method: "get",
          requestDemo: {},
          responseDemo: {
            code: 1,
            message: "SUCCESS",
            data: {}
          },
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            let arr = (res.data || [])[0] || [];
            let cache = {};
            arr.map((item) => {
              let temp = { $data: item, type: "Goverment", name: item.city_name, value: item.adcode };
              cache[item.adcode] = temp;
              return temp;
            });
            arr.map((item) => {
              if (item.parent_id && cache[item.parent_id]) {
                cache[item.parent_id].children = cache[item.parent_id].children || [];
                cache[item.parent_id].children.push(cache[item.adcode]);
              }
            });
            let children = Object.values(cache).filter((item) => !item.$data.parent_id);
            // console.log(cache, children);
            res.data = [
              {
                name: "主管部门",
                value: null,
                type: "Goverment",
                children: children
              }
            ];

            return res;
          }
        },
        GetOtherCompany: {
          name: "获取参建单位树",
          url: "api/sq_team/GetOtherCompany",
          method: "get",
          requestDemo: {},
          responseDemo: {
            code: 1,
            message: "SUCCESS",
            data: {}
          },
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            // console.log("[获取参建单位树]", res);
            res.data = [
              {
                name: "参建单位",
                value: null,
                type: "Company",
                children: ((res.data || [])[0] || []).map((item) => {
                  return { $data: item, type: "Company", name: item.wbt_name, value: item.wbt_id };
                })
              }
            ];
            return res;
          }
        },
        GetGovermentList: {
          name: "返回主管部门列表",
          url: "api/sq_team/GetGovermentList",
          method: "get",
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = ((res.data || [])[0] || []).map((item) => {
              return { $data: item, type: "Goverment", name: item.zg_name, value: item.zg_id };
            });
            return res;
          }
        },
        GetCompanyList: {
          name: "返回公司列表",
          url: "api/sq_team/GetCompanyList",
          method: "get",
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = ((res.data || [])[0] || []).map((item) => {
              return { $data: item, type: "Company", name: item.name || item.sc_name, value: item.sc_id };
            });
            return res;
          }
        },
        GetGovermentById: {
          name: "根据id返回一个主管部门对象",
          url: "api/sq_team/GetGovermentById", //api/sq_team/GetGovermentById
          method: "get",
          packagingRequest: function (param) {
            return {
              params: { id: param.zg_id },
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        GetCompanyById: {
          name: "根据id返回一个公司对象",
          url: "api/sq_team/GetCompanyById", //GET /api/sq_team/GetCompanyById
          method: "get",
          packagingRequest: function (param) {
            return {
              params: { id: param.sc_id },
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        InsertCompany: {
          name: "添加一个公司对象",
          url: "api/sq_team/InsertCompany", //POST /api/sq_team/InsertCompany
          method: "POST",
          packagingRequest: function (param) {
            return {
              params: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        UpdateCompany: {
          name: "更新公司",
          url: "api/sq_team/UpdateCompany", //POST /api/sq_team/UpdateCompany
          method: "POST",
          packagingRequest: function (param) {
            return {
              data: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        DeleteCompany: {
          name: "删除公司",
          url: "api/sq_team/DeleteCompany", //POST /api/sq_team/DeleteCompany
          method: "POST",
          packagingRequest: function (param) {
            return {
              params: { id: param.sc_id },
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        InsertGoverment: {
          name: "添加一个主管部门对象",
          url: "api/sq_team/InsertGoverment", //POST /api/sq_team/InsertGoverment
          method: "POST",
          packagingRequest: function (param) {
            return {
              data: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        UpdateGoverment: {
          name: "更新主管部",
          url: "api/sq_team/UpdateGoverment", //POST /api/sq_team/UpdateGoverment
          method: "POST",
          packagingRequest: function (param) {
            return {
              data: param,
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        },
        DeleteGoverment: {
          name: "删除主管部门",
          url: "api/sq_team/DeleteGoverment", //POST /api/sq_team/DeleteGoverment
          method: "POST",
          packagingRequest: function (param) {
            return {
              params: { id: param.zg_id },
              url: this.url,
              method: this.method
            };
          },
          packagingResponse(res) {
            res.data = (res.data || [])[0];
            return res;
          }
        }
      };
    </script>
    <!-- 页面渲染入口 -->
    <link rel="stylesheet" href="./lib/app.css" />
    <div id="app" class="abs app flex-column"></div>
    <template id="dom-app">
      <Organization-Manage></Organization-Manage>
    </template>
    <script>
      window.$message = ElementPlus.ElMessage;
      var App = {
        extends: BaseComponent,
        template: "#dom-app",
        components: { OrganizationManage }
      };
      var app = Vue.createApp(Application, { app: App }); //渲染入口
      app.use(ElementPlus, { locale: ElementPlusLocaleZhCn }); //ui库
      app.use(Application); //公共组件库
      window.$app = app;
      window.app = app.mount("#app");
    </script>
  </body>
</html>
